Nunjucks 模板语言

Nunjucks 是一种由 JavaScript 提供支持的模板语言。这是一种扩展 HTML 的方式，让我们可以添加逻辑、循环和各种其他功能。

Eleventy 已经内置了 Nunjucks，如果我们要使用 .njk 文件，它会自动使用 Nunjucks 来处理它。

模板示例

《Learn Eleventy From Scratch》课程中给出的 Base 模板，可以作为网站的基础模板。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>{{ title }}</title>
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

其中 block content 和 endblock 是是一起使用的，创建了一个占位符 content，用于向其中注入数据。

模板继承

再基于 base 模板创建一个 home 模板：

{% extends "layouts/base.html" %} 
{% block content %}
  <article>
    <h1>{{ title }}</h1>
    {{ content | safe }}
  </article>
{% endblock %}

它继承了 base 模板，并在 content 内部做了一些细化。并且出现了新的 content 位置，这是内容最终填充的地方。

这将渲染 Markdown 内容，因为它是 Markdown，所以现在将转换为 HTML，这就是 safe 发挥作用的地方。

其中 safe 就是一个 Eleventy 的过滤器。我们在这里打开了自动转义功能，它可以保护我们免受跨站点脚本攻击。

将模板分配给页面

修改 Markdown：

---
title: 'Hello, world'
layout: 'layouts/home.html'
---

This is pretty _rad_, right?

Partials

Partials 之一段可复用的局部模板，可以反复使用。

引用《Lesson 6: Partials basics | Learn Eleventy From Scratch》中的示例，创建一个网站标题 Partials。

在 base 模板中包含以下两行：

{% include "partials/site-head.html" %}
<main tabindex="-1" id="main-content">{% block content %}{% endblock %}</main>

第一行引入了一个 Partials。

Partials 存放于 src/_includes/partials。在其中创建一个 site-head.html（site-head.njk）：

<a class="[ skip-link ] [ button ]" href="#main-content">Skip to content</a>
<header role="banner" class="site-head">
  <div class="wrapper">
    <div class="site-head__inner">
      <a href="/" aria-label="Issue 33 - home" class="site-head__brand">
        {% include "partials/brand.svg" %}
      </a>
      <nav class="[ nav ] [ site-head__nav ] [ font-sans ]" aria-label="Primary">
        <ul class="nav__list">
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/work">Work</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

其中：

本文作者：Maeiee

本文链接：Nunjucks 模板语言

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！